@liveWidth1680: 500px;
@liveTeaWidth1680: 540px;
@qaWidth1680: 370px;

@liveWidth1440: 450px;
@liveTeaWidth1440: 490px;
@qaWidth1440: 340px;

@liveWidth1200: 420px;
@liveTeaWidth1200: 460px;
@qaWidth1200: 320px;

@liveWidth1000: 400px;
@liveTeaWidth1000: 440px;
@qaWidth1000: 300px;

@media screen and (max-width: 1680px){
  .before_screen {
    &.showDm {
      right: @liveWidth1680;
    }
  }
  .dm_con {
    width: @liveWidth1680;
    &.hide {
      transform: translateX(@liveWidth1680);
    }
  }
  .wait_teacher {
    &.showDm {
      right: @liveWidth1680;
    }
  }
  .live_screen {
    &.showDm {
      right: @liveWidth1680;
    }
  }
  .online_teacher_con {
    &.showDm {
      right: @liveTeaWidth1680;
    }
  }
  .qa_screen {
    .qa_left {
      width: @qaWidth1680;
    }
    .qa_right {
      left: @qaWidth1680;
    }
  }
  .replay_live_screen {
    .replay_live_screen_left {
      &.showDm {
        right: @liveWidth1680;
      }
    }
  }
  .replay_dm_con {
    width: @liveWidth1680;
    &.hide {
      transform: translateX(@liveWidth1680);
    }
  }
  .replay_qa_screen {
    .replay_qa_screen_left {
      width: @qaWidth1680;
    }
    .replay_qa_screen_right {
      left: @qaWidth1680;
    }
  }
}
@media screen and (max-width: 1440px){
  .before_screen {
    &.showDm {
      right: @liveWidth1440;
    }
  }
  .dm_con {
    width: @liveWidth1440;
    &.hide {
      transform: translateX(@liveWidth1440);
    }
  }
  .wait_teacher {
    &.showDm {
      right: @liveWidth1440;
    }
  }
  .live_screen {
    &.showDm {
      right: @liveWidth1440;
    }
  }
  .online_teacher_con {
    &.showDm {
      right: @liveTeaWidth1440;
    }
  }
  .qa_screen {
    .qa_left {
      width: @qaWidth1440;
    }
    .qa_right {
      left: @qaWidth1440;
    }
  }
  .replay_live_screen {
    .replay_live_screen_left {
      &.showDm {
        right: @liveWidth1440;
      }
    }
  }
  .replay_dm_con {
    width: @liveWidth1440;
    &.hide {
      transform: translateX(@liveWidth1440);
    }
  }
  .replay_qa_screen {
    .replay_qa_screen_left {
      width: @qaWidth1440;
    }
    .replay_qa_screen_right {
      left: @qaWidth1440;
    }
  }
}
@media screen and (max-width: 1200px){
  .before_screen {
    &.showDm {
      right: @liveWidth1200;
    }
  }
  .dm_con {
    width: @liveWidth1200;
    &.hide {
      transform: translateX(@liveWidth1200);
    }
  }
  .wait_teacher {
    &.showDm {
      right: @liveWidth1200;
    }
  }
  .live_screen {
    &.showDm {
      right: @liveWidth1200;
    }
  }
  .online_teacher_con {
    &.showDm {
      right: @liveTeaWidth1200;
    }
  }
  .qa_screen {
    .qa_left {
      width: @qaWidth1200;
    }
    .qa_right {
      left: @qaWidth1200;
      .qa_title {
        font-size: 16;
      }
      .qa_content {
        .qa_list {
          .qa_item {
            .qa_detail {
              .qa_name {
                font-size: 13px;
              }
              .qa_text {
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }
  .replay_qa_screen {
    .qa_title {
      font-size: 16;
    }
    .qa_content {
      .qa_list {
        .qa_item {
          .qa_detail {
            .qa_name {
              font-size: 13px;
            }
            .qa_text {
              font-size: 15px;
            }
          }
        }
      }
    }
  }
  .replay_live_screen {
    .replay_live_screen_left {
      &.showDm {
        right: @liveWidth1200;
      }
    }
  }
  .replay_dm_con {
    width: @liveWidth1200;
    &.hide {
      transform: translateX(@liveWidth1200);
    }
  }
  .replay_qa_screen {
    .replay_qa_screen_left {
      width: @qaWidth1200;
    }
    .replay_qa_screen_right {
      left: @qaWidth1200;
    }
  }
}
@media screen and (max-width: 1000px){
  .before_screen {
    &.showDm {
      right: @liveWidth1000;
    }
  }
  .dm_con {
    width: @liveWidth1000;
    &.hide {
      transform: translateX(@liveWidth1000);
    }
  }
  .wait_teacher {
    &.showDm {
      right: @liveWidth1000;
    }
  }
  .live_screen {
    &.showDm {
      right: @liveWidth1000;
    }
  }
  .online_teacher_con {
    &.showDm {
      right: @liveTeaWidth1000;
    }
  }
  .qa_screen {
    .qa_left {
      width: @qaWidth1000;
    }
    .qa_right {
      left: @qaWidth1000;
    }
  }
  .replay_live_screen {
    .replay_live_screen_left {
      &.showDm {
        right: @liveWidth1000;
      }
    }
  }
  .replay_dm_con {
    width: @liveWidth1000;
    &.hide {
      transform: translateX(@liveWidth1000);
    }
  }
  .replay_qa_screen {
    .replay_qa_screen_left {
      width: @qaWidth1000;
    }
    .replay_qa_screen_right {
      left: @qaWidth1000;
    }
  }
}
